import React from 'react'
import { Box } from '$components';
import RingChart from './charts/ring';
import { SHUI_ZHAN } from '../constants/water';

function LeftBottom(props) {
    const { waterLevelLength } = props;
    const colors = [
        {
            linearGradientTo: 'rgba(5, 207, 247, 0)',
            linearGradientFrom: 'rgba(5, 207, 247, 1)',
        },
        {
            linearGradientTo: 'rgba(23, 123, 238, 1)',
            linearGradientFrom: 'rgba(23, 123, 238, 0)',
        },
        {
            linearGradientTo: 'rgba(234, 185, 102, 1)',
            linearGradientFrom: 'rgba(234, 185, 102, 0)',
        },
        {
            linearGradientTo: 'rgba(108, 208, 106, 0)',
            linearGradientFrom: 'rgba(108, 208, 106, 1)',
        },
        {
            linearGradientTo: 'rgba(194, 208, 213, 0)',
            linearGradientFrom: 'rgba(194, 208, 213, 1)',
        },
        {
            linearGradientTo: 'rgba(213, 204, 92, 0)',
            linearGradientFrom: 'rgba(213, 204, 92, 1)',
        },
    ];

    const data = [
        { name: '泵站站点', value: SHUI_ZHAN.length },
        { name: '雨量站点', value: 1 },
        { name: '水位站点', value: waterLevelLength }
    ]

    return <Box title={"建设数据"} >
        <RingChart
            data={data}
            colors={colors}
            width={220}
            height={220}
            image={
                {
                    url: '/assets/images/ring_bg.png',
                    width: 106,
                    height: 106,
                }
            }
        />
    </Box>
}

export default LeftBottom;


